<template>
  <div class="container">
    <el-card style="margin: 20px">
      <div slot="header">试题录入</div>
      <el-form ref="formData" :model="formData" :rules="rules" label-position="right" label-width="120px">
        <!-- 学科 -->
        <el-form-item label="学科：" prop="subjectID">
          <el-select v-model="formData.subjectID" placeholder="请选择" style="width: 400px">
            <el-option label="区域一" value="shanghai"></el-option>
          </el-select>
        </el-form-item>

        <!-- 目录 -->
        <el-form-item label="目录：">
          <el-select v-model="formData.catalogID" placeholder="请选择" style="width: 400px">
            <el-option label="区域一" value="shanghai"></el-option>
          </el-select>
        </el-form-item>

        <!-- 企业 -->
        <el-form-item label="企业：">
          <el-select v-model="formData.enterpriseID" placeholder="请选择" style="width: 400px">
            <el-option label="区域一" value="shanghai"></el-option>
          </el-select>
        </el-form-item>

        <!-- 城市 -->
        <el-form-item label="城市：">
          <el-select v-model="formData.province" placeholder="请选择" style="width: 198px">
            <el-option label="区域一" value="shanghai"></el-option>
          </el-select>

          <el-select v-model="formData.city" placeholder="请选择" style="width: 198px; margin-left: 4px">
            <el-option label="区域一" value="shanghai"></el-option>
          </el-select>
        </el-form-item>

        <!-- 方向 -->
        <el-form-item label="方向：">
          <el-select v-model="formData.direction" placeholder="请选择" style="width: 400px">
            <el-option label="区域一" value="shanghai"></el-option>
          </el-select>
        </el-form-item>

        <!-- 题型 -->
        <el-form-item label="题型：">
          <el-radio-group v-model="formData.questionType" style="width: 400px">
            <el-radio label="单选"></el-radio>
            <el-radio label="多选"></el-radio>
            <el-radio label="简答"></el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 难度 -->
        <el-form-item label="难度：">
          <el-radio-group v-model="formData.difficulty" style="width: 400px">
            <el-radio label="简单"></el-radio>
            <el-radio label="一般"></el-radio>
            <el-radio label="困难"></el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 富文本编辑器 -->
        <!-- <el-form-item label="题干"> -->
        <!-- <quill-editor ref="myQuillEditor"> </quill-editor> -->
        <!-- </el-form-item> -->

        <!-- 选项 -->
        <el-form-item label="选项：">
          <el-radio-group v-model="formData.direction" placeholder="请选择" style="width: 400px">
            <el-radio>
              A：
              <el-input style="width: 240px; margin-bottom: 20px"></el-input>
              <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" multiple>
                <div class="el-upload">将文件拖到此处，或<em>点击上传</em></div>
              </el-upload>
            </el-radio>
            <el-radio>
              B：
              <el-input style="width: 240px"></el-input>
            </el-radio>
            <el-radio>
              C：
              <el-input style="width: 240px"></el-input>
            </el-radio>
            <el-radio>
              D：
              <el-input style="width: 240px"></el-input>
            </el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 解析视频 -->
        <el-form-item label="解析视频：">
          <el-input v-model="formData.videoURL" style="width: 400px"></el-input>
        </el-form-item>

        <!-- 答案解析 -->
        <el-form-item label="答案解析：">
          <el-input v-model="formData.videoURL" style="width: 400px"></el-input>
        </el-form-item>

        <!-- 题目备注 -->
        <el-form-item label="题目备注：">
          <el-input style="width: 400px"></el-input>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import quillEditor from '@/components/QuillEditor'

export default {
  components: {
    quillEditor
  },
  data() {
    return {
      formData: {
        subjectID: '', // 学科
        catalogID: '', // 目录
        enterpriseID: '', // 企业
        province: '', // 城市
        city: '', // 地区
        direction: '', // 方向
        questionType: '', // 题型
        difficulty: '', // 难度
        question: '', // 题干
        options: {
          code: '',
          title: '',
          img: '',
          isRight: ''
        }, //
        videoURL: '', // 解析视频
        answer: '', // 答案解析
        remarks: '', // 题目备注
        tags: '' // 试题标签
      },
      rules: {
        subjectID: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      }
    }
  }
}
</script>

<style scoped lang="less"></style>
